<template>
  <view class="wrapForm">
    <view class="bgLine flex jst-between pL25 pR25"> </view>
    <view class="wrapFormBody pL15 pR15 pT15 rzBox">
      <!-- 企业信息 -->
      <u-form
        :label-style="{ 'font-size': '30rpx' }"
        class="xf-wrap-form"
        ref="form"
        :rules="rules"
        :model="formData"
        :error-type="['toast']"
      >
        <view>
          <text class="font24">收件信息</text>
        </view>
        <u-form-item
          :required="true"
          :border-bottom="false"
          label="电子邮箱"
          :label-position="'top'"
          prop="email"
        >
          <view class="w100 flex font14 inpuTBg">
            <u-input
              class="w100"
              placeholder="请输入电子邮箱"
              v-model="formData.email"
            />
          </view>
        </u-form-item>
        <u-form-item
          :required="true"
          :border-bottom="false"
          label="联系人"
          :label-position="'top'"
          prop="recipient"
        >
          <view class="w100 flex font14 inpuTBg">
            <u-input
              class="w100"
              placeholder="请输入联系人"
              v-model="formData.recipient"
            />
          </view>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :required="true"
          label="联系方式"
          :label-position="'top'"
          prop="telephone"
        >
          <view class="w100 flex alg-center jst-between inpuTBg">
            <u-input
              placeholder="请输入联系方式"
              v-model="formData.telephone"
            />
          </view>
        </u-form-item>
        <u-form-item
          :border-bottom="false"
          :required="true"
          label="收件地址"
          :label-position="'top'"
          prop="address"
        >
          <view class="w100 flex alg-center jst-between inpuTBg">
            <view class="w70"
              ><u-input
                placeholder="请选择收件地址"
                v-model="formData.address"
              />
            </view>
            <image
              @click="chooseLocation('address')"
              class="imgW36"
              :src="resources.posIcon"
              mode=""
            ></image>
          </view>
        </u-form-item>
        <u-form-item
          :required="true"
          :border-bottom="false"
          label="邮编"
          :label-position="'top'"
          prop="postcode"
        >
          <view class="w100 flex font14 inpuTBg">
            <u-input
              class="w100"
              placeholder="请输入邮编"
              v-model="formData.postcode"
            />
          </view>
        </u-form-item>
        <u-form-item
          :required="true"
          :border-bottom="false"
          label="备注"
          :label-position="'top'"
          prop="remark"
        >
          <view class="w100 flex font14 inpuTBg">
            <u-input
              class="w100"
              placeholder="请输入备注"
              v-model="formData.remark"
            />
          </view>
        </u-form-item>
      </u-form>
    </view>
    <block>
      <view class="flex jst-center mT20 bottomW bgf">
        <view class="pointer rightNowPay u-f font15 t-center" @click="invoice">
          确认
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { chooseLocal } from "@/libs/map.js";
import {
  addEnterprise,
  findEnterpriseInfoById,
  applyInvoice,
} from "@/api/companyInterface/user.js";
import selAreaMinxs from "@/utils/selArea.js";
export default {
  mixins: [selAreaMinxs],
  components: {},
  data() {
    return {
      billIds: [],
      formData: {
        email: "",
        recipient: "",
        telephone: "",
        postcode: "",
        address: "",
        remark: ""
      },
      // 企业信息
      rules: {
        email: [
          {
            required: true,
            message: "电子邮箱不能为空",
            trigger: ["change", "blur"],
          },
        ],
        recipient: [
          {
            required: true,
            message: "联系人不能为空",
            trigger: ["change", "blur"],
          },
        ],
        telephone: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: ["change", "blur"],
          },
        ],
        postcode: [
          {
            required: true,
            message: "邮编不能为空",
            trigger: ["change", "blur"],
          },
        ],
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: ["change", "blur"],
          },
        ],
        remark: [
          {
            required: true,
            message: "备注不能为空",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  onShow() {},
  onLoad(e) {
    if (e) {
      const ids = JSON.parse(e.ids);
      this.billIds = ids;
    }
    // await this.initDic();
  },
  methods: {
    initDic() {
      let arr = [
        // {
        //   name: "jjp_oddjob_settlement_whether",
        //   v: "isSpecialLis",
        //   text: "isSpecial",
        // },
      ];
      for (let i = 0; i < arr.length; i++) {
        this.baseStore.getDictionaryDataAll(arr[i].name).then((res) => {
          this[arr[i].v] = res.map((v, j) => {
            if (j == 0) {
              this.formData[arr[i].text] = v.value;
              this.formData[arr[i].text + "Text"] = v.text;
            }
            return {
              ...v,
              checked: j == 0 ? true : false,
            };
          });
        });
      }
    },

    //选择位置信息
    async chooseLocation(name) {
      let res = await chooseLocal();
      let r = res.address + res.name;
      let d = this.regionDiscern(r);
      this.formData[name] = d.data.formatted_address;
    },
    checkType(name, v, i) {
      this.formData[name] = v.value;
      this.formData[name + "Text"] = v.text;
      this[name + "Lis"].map((item, index) => {
        item.checked = index === i ? true : false;
      });
    },

    invoice() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data = this.xf.deepClone(this.formData);
          applyInvoice({ ...data, billIds: this.billIds }).then((res) => {
            this.xf.onlineUtils.toast("开票成功");
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
page {
  min-height: 100%;
  background-color: #fff;
}

.inpuTBg .uicon-arrow-right {
  content: "\e600" !important;
}
</style>
<style lang="scss" scoped>
.inpuTBg {
  padding: 0 30rpx;
  height: 90rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  display: flex;
  align-items: center;
}

.salaryInfo {
  color: #ff9c5a;
  font-size: 24rpx;
  margin-top: 24rpx;
  line-height: 43rpx;
}
.typeItem {
  width: calc(33% - 30rpx);
  height: 80rpx;
  line-height: 80rpx;
  border: 2rpx solid transparent;
  text-align: center;
  background: #f8f8f8;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;

  &:nth-child(3n) {
    margin-right: 0;
  }

  &.checked {
    background: #eaf4fe;
    border-radius: 16rpx;

    /* #ifdef MP-COMPANY */
    color: #3291f8;
    border: 2px solid #3291f8;
    /* #endif */
    /* #ifdef MP-ECONOMIC */
    color: #00a0c6;
    border: 2px solid #00a0c6;

    /* #endif */
  }
  &.checked-disabled {
    background: #f8f8f8;
    border-radius: 16rpx;
    color: #999999;
    border: 1px solid #999999;
  }
}

.setalle {
  padding-top: 70rpx;
}

.wrapForm {
  .u-form-item {
    padding: 0 !important;
  }

  .rzCardBox {
    height: 128rpx;
    background: #f8f8f8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: 60rpx;

    &:last-child {
      margin-top: 30rpx;
    }

    .imgRzCard {
      width: 40rpx;
      height: 32rpx;
    }
  }

  padding-bottom: 240rpx;

  // height: 100%;

  .wrapFormBody {
    margin-top: -30rpx;
    border-radius: 40rpx 40rpx 0 0;
    background: #fff;
  }

  .uni-forms-item {
    align-items: center !important;
  }

  .uni-input-placeholder {
    // text-align: right !important;
    color: #bdbdbd !important;
  }
}

.bgLine {
  /* #ifdef MP-COMPANY */
  background-color: #ebf0ff;
  /* #endif */
  /* #ifdef MP-ECONOMIC */
  background-color: #ebfcff;
  /* #endif */

  width: 100%;
  // height: 60rpx;
  padding: 30rpx 40rpx;

  .rzImg {
    width: 168rpx;
    height: 192rpx;
  }
}

.rightNowPay {
  width: 670rpx;
  height: 100rpx;
  line-height: 100rpx;

  border-radius: 30rpx;
  /* #ifdef MP-COMPANY */
  background: #3291f8;
  /* #endif */
  /* #ifdef MP-ECONOMIC */
  background: #00a0c6;
  /* #endif */
}
</style>
